<template>
	<view class="food-select-tab">
		<text class="title">{{ tab.title }}</text>
		<view class="uni-px-5">
			<uni-data-checkbox
				mode="tag"
				v-model="changed"
				:localdata="tab.children"
				selectedColor="rgba(255,0,0,.1)"
				selectedTextColor="#333"
				@change="handleChange"
			></uni-data-checkbox>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const changed = ref(0);

// 父组件向子组件传递过来的函数
const emits = defineEmits(['returnData']);

const { item, index } = defineProps({
	item: {
		type: Object,
		default: {}
	},
	index: {
		type: Number,
		default: 0
	}
});
const tab = ref(item);

const handleChange = ({ detail: { data } }) => {
	const obj = {
		index,
		data
	};
	emits('returnData', obj);
	// console.log(obj);
};

defineExpose({ changed });
</script>
<style scoped lang="scss">
.food-select-tab {
	margin-bottom: 40rpx;
	.title {
		font-weight: 600;
	}
}

// 修改 uni-data-checkbox 组件的样式
::v-deep .uni-px-5 {
	.checklist-box,
	label {
		min-width: 150rpx !important;
		height: 60rpx !important;
	}
	label > view {
		justify-content: center !important;
	}
}
</style>
<style></style>
